<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="水库水情信息"
    :footer="null"
    :width="1000"
    :height="620"
    :canFullscreen="false"
    :destroyOnClose="true"
    wrapClassName="stationPopup"
    @height-change="handleHeightChange"
  >
    <TablePopup :tableDataSource="state.tableDataSource" :tableColumns="state.tableColumns" />
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, reactive, provide } from 'vue';
  import { BasicModal, useModalInner } from '@gui-pkg/antdcomponents';
  import TablePopup from '@/components/TablePopup';
  import { getRRAllData } from '@/api/oneMap/baseData';

  const modalHeightValue = ref(620);
  const state = reactive({
    data: null,
    tableColumns: [
      {title: '过程线', key: 'action', width: 50, align: 'center', },
      {title: '序号', dataIndex: 'index', key: 'index', width: 70, align: 'center', },
      {title: '站码', dataIndex: 'stcd', key: 'stcd', width: 120, align: 'center', },
      {title: '站名', dataIndex: 'stnm', key: 'stnm', width: 140, align: 'center',  },
      {title: '时间', dataIndex: 'tm', key: 'tm',  width: 160, align: 'center', },
      {title: '库水位', dataIndex: 'waterLevel', key: 'waterLevel',  width: 120, align: 'center', sorter: (a, b) => a.waterLevel - b.waterLevel,},
      {title: '汛限水位', dataIndex: 'xxLevel', key: 'xxLevel',  width: 140, align: 'center', sorter: (a, b) => a.xxLevel - b.xxLevel,},
      {title: '设计水位', dataIndex: 'controlWaterLevel', key: 'controlWaterLevel',  width: 140, align: 'center', sorter: (a, b) => a.controlWaterLevel - b.controlWaterLevel,},
      {title: '校核水位', dataIndex: 'jxLevel', key: 'jxLevel',  width: 140, align: 'center', sorter: (a, b) => a.jxLevel - b.jxLevel,},
      {title: '蓄水量', dataIndex: 'capacity', key: 'capacity',  width: 120, align: 'center', sorter: (a, b) => a.w - b.w,},
      {title: '总库容', dataIndex: 'ttcp', key: 'ttcp', width: 120, align: 'center',},
      {title: '入库流量', dataIndex: 'inq', key: 'inq',  width: 120, align: 'center', sorter: (a, b) => a.inq - b.inq,},
      {title: '出库流量', dataIndex: 'otq', key: 'otq',  width: 120, align: 'center', sorter: (a, b) => a.otq - b.otq,}
    ],
    tableDataSource: []
  });

  const [register, { setModalProps }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false });
    state.data = data.record;
    const allRRData = await getRRAllData();
    state.tableDataSource = allRRData;
  });

  // 弹窗高度变化，主要是监听是否点击了全屏
  const handleHeightChange = (height: string) => {
    modalHeightValue.value = height;
  };
  provide('ModalHeightChange', modalHeightValue);
</script>

<style lang="less" rel="stylesheet/less" scoped>

</style>
